<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title><?php echo $title_for_layout;?></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>

<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all" rel="stylesheet" type="text/css"/>
<?php 
		echo $this->Html->css(array('plugins/font-awesome/css/font-awesome.min.css', 
									'plugins/bootstrap/css/bootstrap.min.css', 
									'plugins/uniform/css/uniform.default.css'
									));
	?>
	<?php
	echo $this->Html->css(array('backend/style-metronic.css', 
								'backend/style.css', 
								'backend/style-responsive.css', 
								'backend/plugins.css', 
								'backend/themes/default.css', 
								'backend/custom.css'));
	?>
<link rel="shortcut icon" href="favicon.ico"/>
<style type="text/css">
	/***
Login page
***/

/* logo page */
.login {
  background-color: #444 !important;
}

.login .logo {
  margin: 0 auto;   
  margin-top:60px;
  padding: 15px;
  text-align: center;
}  

.login .content {
  background-color:#fff; 
  width: 360px;
  margin: 0 auto; 
  margin-bottom: 0px;
  padding: 30px;  
  padding-top: 20px;  
  padding-bottom: 15px;  
}

.login .content h3 {
  color: #000;
}
.login .content h4  {
  color: #555;
}

.login .content p {
  color: #222;
}

.login .content .login-form,
.login .content .forget-form {
    padding: 0px;
    margin: 0px;
}

.login .content .input-icon {
  border-left: 2px solid #35aa47 !important;
}

.login .content .input-icon .form-control {
  border-left: 0;
}

.login .content .forget-form {
  display: none;
}

.login .content .register-form {
  display: none;
}

.login .content .form-title {
  font-weight: 300;
  margin-bottom: 25px;
}

.login .content .form-actions {
  background-color: #fff;
  clear: both;
  border: 0px;
  border-bottom: 1px solid #eee;
  padding: 0px 30px 25px 30px;
  margin-left: -30px;
  margin-right: -30px;
}

.login .content .form-actions .checkbox {
  margin-left: 0;
  padding-left: 0;
}

.login .content .forget-form .form-actions {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 20px;
}  

.login .content .register-form .form-actions {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0px;
}

.login .content .form-actions .checkbox {
  margin-top: 8px;
  display: inline-block;
}

.login .content .form-actions .btn {
  margin-top: 1px;
}

.login .content .forget-password {
  margin-top: 25px;
}

.login .content .create-account {
  border-top: 1px dotted #eee;
  padding-top: 10px;
  margin-top: 15px;
}

.login .content .create-account a {
  display: inline-block;
  margin-top: 5px;
}

/* select2 dropdowns */
.login .content .select2-container {
  border-left: 2px solid #35aa47 !important;
}

.login .content .select2-container .select2-choice {
  border-left: none !important;
}

.login .content .select2-container i {
  display: inline-block;
  position: relative;
  color: #ccc;
  z-index: 1;
  top:1px;
  margin: 4px 4px 0px 3px; 
  width: 16px;
  height: 16px;
  font-size: 16px;
  text-align: center; 
}

.login .content .has-error .select2-container i {
  color: #b94a48;
}

.login .content .select2-container a span {
  font-size: 13px;
}

.login .content .select2-container a span img {
  margin-left: 4px;
}

/* footer copyright */
.login .copyright {
  text-align: center;
  margin: 0 auto; 
  padding: 10px;
  color: #999;
  font-size: 13px;
}

@media (max-width: 480px) {
  /***
  Login page
  ***/
  .login .logo {
    margin-top:10px;
  }

  .login .content {
    width: 280px;
  }

  .login .content h3 {
    font-size: 22px;
  }


  .login .checkbox {
    font-size: 13px;
  }
}
</style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="login">
	<!-- BEGIN LOGO -->
<div class="logo">
	<a href="index-2.html">
		<img src="assets/img/logo-big.png" alt=""/>
	</a>
</div>
<!-- END LOGO -->
<!-- BEGIN LOGIN -->
<div class="content">
	<!-- BEGIN LOGIN FORM -->
		<?php 
			echo $this->Form->create('User', array('class'	=>	'login-form', 'role'	=>	'form')); 
		?>
		<h3 class="form-title">Login to your account</h3>
		<?php 
		$flash = $this->Session->flash();
		if($flash)
		{
			echo '<div class="alert alert-danger">
					<button class="close" data-close="alert"></button>
					<span>'.$flash.'</span>
				</div>';
		}
		?>		
		<div class="form-group">
			<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
			<label class="control-label visible-ie8 visible-ie9">Username</label>
			<div class="input-icon">
				<i class="fa fa-user"></i>
				<?php echo $this->Form->input('username', 
										array('label'			=>	false, 
											  'div'				=>	false,
											  'placeholder'		=>	'Username',
											  'class'			=>	'form-control placeholder-no-fix',
											  'autocomplete'	=>	'off')); ?>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label visible-ie8 visible-ie9">Password</label>
			<div class="input-icon">
				<i class="fa fa-lock"></i>
				<?php echo $this->Form->input('password', 
										array('label'			=>	false, 
											  'div'				=>	false,
											  'placeholder'		=>	'Password',
											  'class'			=>	'form-control placeholder-no-fix',
											  'autocomplete'	=>	'off')); ?>
			</div>
		</div>
		<div class="form-actions">
			<label class="checkbox">
			<input type="checkbox" name="data[User][remember]" value="1"/> Remember me </label>
			<button type="submit" class="btn green pull-right">
			Login <i class="m-icon-swapright m-icon-white"></i>
			</button>
		</div>
	</form>
	<!-- END LOGIN FORM -->
	
	
</div>
<!-- END LOGIN -->
<!-- BEGIN COPYRIGHT -->
<div class="copyright">
	 2014 &copy; Metronic. Admin Dashboard Template.
</div>





<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script> 
<![endif]-->
<?php
	echo $this->Html->script(array(	'plugins/jquery-1.10.2.min.js', 
								'plugins/jquery-migrate-1.2.1.min.js',
								'plugins/bootstrap/js/bootstrap.min.js',
								'plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js',
								'plugins/jquery-slimscroll/jquery.slimscroll.min.js',
								'plugins/jquery.blockui.min.js',
								'plugins/jquery.cokie.min.js',
								'plugins/uniform/jquery.uniform.min.js'));

	echo $this->Html->script(array('scripts/core/app.js'));
	?>
<script>
jQuery(document).ready(function() {   
   // initiate layout and plugins
   App.init();
});
</script>
<?php echo $this->element('sql_dump'); ?>
</body>
</html>